<template>
  <footer class="app-footer">
    <!-- 联系我们 -->
    <div class="contact">
      <div class="container">
        <dl>
          <dt>客户服务</dt>
          <dd>
            <i class="iconfont icon-kefu"></i>
            在线客服
          </dd>
          <dd>
            <i class="iconfont icon-question"></i>
            问题反馈
          </dd>
        </dl>
        <dl>
          <dt>关注我们</dt>
          <dd>
            <i class="iconfont icon-weixin"></i>
            公众号
          </dd>
          <dd>
            <i class="iconfont icon-weibo"></i>
            微博
          </dd>
        </dl>
        <dl>
          <dt>下载App</dt>
          <dd class="qrcode">
            <img src="../assets/image/qrcode.jpg" alt="">
          </dd>
          <dd class="download">
            <span>扫描二维码</span>
            <span>立马下载APP</span>
            <a href="javascript:;">下载页面</a>
          </dd>
        </dl>
        <dl>
          <dt>服务热线</dt>
          <dd class="hotline">
            400-0000-000
            <small>周一至周日 8:00-18:00</small>
          </dd>
        </dl>
      </div>
    </div>
    <div class="extra">
      <div class="container">
        <div class="slogan">
          <a href="javascript:;">
            <i class="iconfont icon-footer01"></i><span>价格亲民</span>
          </a>
          <a href="javascript:;">
            <i class="iconfont icon-footer02"></i><span>物流快捷</span>
          </a>
          <a href="javascript:;">
            <i class="iconfont icon-footer03"></i><span>品质新鲜</span>
          </a>
        </div>
           <!-- 版权信息 -->
        <div class="copyright">
          <p>
            <a href="javascript:;">关于我们</a>
            <a href="javascript:;">帮助中心</a>
            <a href="javascript:;">售后服务</a>
            <a href="javascript:;">配送与验收</a>
            <a href="javascript:;">商务合作</a>
            <a href="javascript:;">搜索推荐</a>
            <a href="javascript:;">友情链接</a>
          </p>
          <p>CopyRight © 小兔鲜儿</p>
        </div>
      </div>
    </div>
  </footer>
</template>
<script>
export default {
  name: 'appFooter'
}
</script>
<style lang="less" scoped>
.app-footer {
  .contact {
    background-color: #fff;
    .container {
      padding: 60px 0 40px 25px;
      display: flex;
      justify-content: space-between;
      dl {
        height: 190px;
        text-align: center;
        padding: 0 62px;
        border-right: 1px solid #f2f2f2;
        color: #999;
        &:first-child {
          padding-left: 0;
        }
        &:last-child {
          border-right: none;
          padding-right: 0;
        }
        dt {
          font-size: 18px;
          line-height: 1;
        }
        dd {
          float: left;
          width: 92px;
          height: 92px;
          margin: 36px 12px 0 0;
          padding-top: 10px;
          border: 1px solid #ededed;
          .iconfont {
            font-size: 36px;
            display: block;
            color: #666;
          }
        }
        .qrcode {
          float: left;
          width: 92px;
          height: 92px;
          padding: 10px;
        }
        .download {
          border: none;
          span {
            display: block;
          }
          a {
            display: inline-block;
            margin-top: 5px;
            background-color: #27ba9b;
            padding: 8px 17px;
            font-size: 12px;
            color: #fff;
          }
        }
        .hotline {
          padding-top: 20px;
          font-size: 22px;
          color: #666;
          width: auto;
          height: auto;
          border: none;
          small {
            display: block;
            font-size: 15px;
            color: #999;
          }
        }
      }
    }
  }
  .extra {
    background-color: #333;
    .slogan {
      height: 178px;
      line-height: 50px;
      padding: 60px 100px;
      border-bottom: 1px solid #434343;
      display: flex;
      justify-content: space-between;
      a {
        height: 58px;
        line-height: 58px;
        color: #fff;
        font-size: 28px;
        i {
          font-size: 50px;
          vertical-align: middle;
          margin-right: 10px;
          font-weight: 100;
        }
        span {
          vertical-align: middle;
          text-shadow: 0 0 1px #333;
        }
      }
    }
     .copyright {
    height: 170px;
    padding-top: 40px;
    text-align: center;
    color: #999;
    font-size: 15px;
    p {
      line-height: 1;
      margin-bottom: 20px;
    }
    a {
      color: #999;
      line-height: 1;
      padding: 0 10px;
      border-right: 1px solid #999;
      &:last-child {
        border-right: none;
      }
    }
  }
}
}
</style>
